<template>
    <div 
        class="detailMasker"
        v-show="isShowMasker" 
        @click="closeMasker"
        
    >
        <masker style="border-radius: 2px;" :fullscreen='true' color="000000" :opacity="0.8">
            <div v-if="currentMaskerType === 1" slot="content" class="maskerShareBox">
                <div class="maskerShare">
                    <img class="maskerShare_arrow" src="@/assets/images/detail/detailshare.png" alt="">
                </div>
                <div class="maskerStep">
                    <p class="maskerStep_row"><span class="maskerStep_redpoint">1</span>点击右上角菜单</p>
                    <p class="maskerStep_row"><span class="maskerStep_redpoint">2</span>发送给朋友或分享到朋友圈</p>
                </div>
                <div class="maskerRed">
                    <div>
                        <img class="maskerShare_red" src="@/assets/images/detail/detailMasker_red.png" alt="">
                    </div>
                    <div class="maskerNumBox"> <p class="maskerNum">20</p></div>
                </div>
                <p class="maskerTips">每成功邀请一位好友可获得20狗币奖励</p>
            </div>
            <div v-else-if="currentMaskerType === 2" slot="content" class="maskerConsultBox">
                <div class="maskerConsult">
                    <div class="maskerConsult_header">
                        <div class="maskerConsult_header_div">
                            <img class="maskerConsult_header_img" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1531367364&di=190c7d30e2277f2826dd46b5c1e29179&src=http://pic24.nipic.com/20121029/3822951_123134776000_2.jpg" alt="">
                        </div>
                        <p class="maskerConsult_header_tips">用心服务号每一个客户是我的宗旨！欢迎来电来信咨询！</p>
                    </div>
                    <div class="maskerConsult_body">
                        <div class="maskerConsult_body_left">
                            <p class="maskerConsult_body_left_head">客服小雅</p>
                            <div class="maskerConsult_body_left_body">
                                <div class="maskerConsult_body_left_bodyRow">
                                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.42rem;height:.42rem;vertical-align: -0.1rem">
                                        <use xlink:href="#icon-shouji-copy-copy"></use>
                                    </svg>
                                    <span>{{consulter.contact.phone}}</span>
                                </div>
                                <div class="maskerConsult_body_left_bodyRow">
                                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.42rem;height:.42rem;vertical-align: -0.1rem">
                                        <use xlink:href="#icon-qq"></use>
                                    </svg>
                                    <span>{{consulter.contact.qq}}</span>
                                </div>
                                <div class="maskerConsult_body_left_bodyRow">
                                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.42rem;height:.42rem;vertical-align: -0.1rem">
                                        <use xlink:href="#icon-weixin"></use>
                                    </svg>
                                    <span>{{consulter.contact.weixin}}</span>
                                </div>
                                
                            </div>
                            
                        </div>
                        <div class="maskerConsult_body_right">
                            <qrcode class="consult-bd__qrcode" :value="consulter.qrcode" type="img"></qrcode>
                        </div>
                    </div>
                    <div class="maskerConsult_bottom">
                        扫描/识别二维码添加客服为好友
                    </div>
                </div>
            </div>
        </masker>
    </div>
</template>

<script>
import { Masker, Qrcode, TransferDom, XDialog  } from 'vux'   
import { mapState,mapMutations } from 'vuex'
export default {
    name: 'DeatilMasker',
    directives: {
        TransferDom
    },
    components: {
        Masker,
        Qrcode,
        XDialog
    },
    data () {
        return {
            consulter: {
                imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
                name: '客服小雅',
                contact: {
                    qq: '173385128',
                    phone: '13858586666',
                    weixin: 'xiaoya12345',
                },
                qrcode: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530509640467&di=e554d0f8ef48ef0123428f2dd4e83e6a&imgtype=0&src=http%3A%2F%2Fsrc.house.sina.com.cn%2Fimp%2Fimp%2Fdeal%2F86%2F68%2F4%2Fe51eac8a98c2bd65c6b68bae86c_p1_mk1_wm35.gif' 
            }
        }
    },
    computed: {
        ...mapState({
            currentMaskerType : 'Detail_MaskerType'
        }),
        isShowMasker () {
            return this.currentMaskerType > 0 ? true : false
        }
    },
    methods: {
        closeMasker () {
            this.$store.commit('close_Detail_Masker')
        }
    }

}
</script>

<style lang="stylus" scoped>
.maskerConsult_body_right >>> img 
    width: 2.5rem!important
    height: 2.5rem!important
.detailMasker
    .maskerShareBox
        .maskerShare
            padding: 1rem
            overflow: hidden
            .maskerShare_arrow
                width: 1.06rem
                float: right
        .maskerStep
            padding: .5rem
            color: #fff
            .maskerStep_row
                margin-bottom: .2rem
                font-size: .3rem
                .maskerStep_redpoint
                    display: inline-block
                    width: .7rem
                    height: .7rem
                    background-color: #fc7700
                    line-height: .7rem
                    text-align: center
                    border-radius: 50%
                    margin-right: .2rem
                    font-size: .4rem
        .maskerRed
            text-align: center
            position: relative
            .maskerNumBox
                position: absolute
                top: 1.5rem
                color: #cf3c35
                font-size: .5rem
                width: 100%
                .maskerNum
                    text-align: center
            .maskerShare_red
                width: 3rem
        .maskerTips
            margin-top: .5rem
            color: #afafaf
            text-align: center
    .maskerConsultBox  
        .maskerConsult
            width: 6.65rem
            padding-bottom: 1rem
            margin:  1.55rem auto
            background: #fff
            border-radius: .05rem
            .maskerConsult_header
                padding: 0
                .maskerConsult_header_div
                    height: 4.3rem
                    background-color: #ccc
                    .maskerConsult_header_img
                        width: 100%
                        height: 100%
                .maskerConsult_header_tips
                    color: #ea4800
                    padding: .35rem
                    font-size: .35rem
                    line-height: .4rem
            .maskerConsult_body
                padding: .35rem
                overflow: hidden
                display: flex
                .maskerConsult_body_left
                    float: left
                    width: 3.36rem
                    .maskerConsult_body_left_head
                        border-bottom: 1px solid #999999
                        padding: .1rem
                        box-sizing: border-box
                        font-size: .5rem
                        font-weight: bold
                    .maskerConsult_body_left_body
                        margin-top: .3rem
                        .maskerConsult_body_left_bodyRow
                            margin-bottom: .08rem
                .maskerConsult_body_right
                    flex: 1
                    padding-left: .1rem
                    .consult-bd__qrcode
                        width: 1.07rem
                        height: 1.07rem
                        img
                            width: 1.07rem
                            height: 1.07rem
                        
            .maskerConsult_bottom
                text-align: center
                


        
</style>